<template>
  <view class="container">
    <view class="list-box">
      <image class="qrcode"
             :src="staticUrl+imgSrc"></image>
      <view class="submit-btn"
            @tap="saveQrcode">保存到相册里</view>
    </view>
  </view>
</template>

<script>
import { showToastMsg } from '../../utils'
import { myRequest, http, staticUrl } from '../../utils'

export default {
  data () {
    return {
			staticUrl: staticUrl,
      imgSrc: ''
    }
  },
	onLoad() {
		this.fetchData()
	},
  methods: {
    fetchData () {
      const that = this
      http('/expert/qrcode',
        {
        }, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          that.imgSrc = res.data.data
        }).catch(
          err => {
            console.error(err)
          })
    },
    saveQrcode () {
      const that = this

      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success () {
          uni.downloadFile({
            url: that.imgSrc,
            success (res) {

              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success () {
                  showToastMsg('二维码保存成功')
                },
                fail (err) {
                  uni.showModal({
                    title: '提示',
                    content: '二维码保存失败',
                    showCancel: false
                  })
                }
              })

            },
            fail () {
              uni.showModal({
                title: '提示',
                content: '二维码下载失败',
                showCancel: false
              })
            }
          })
        },
        fail () {
          uni.navigateTo({
            url: '/pages/auth_album/auth_album'
          })
        }
      })

    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 30rpx;
  align-items: center;
  width: 700rpx;
  margin-top: 24rpx;
  padding-bottom: 80rpx;
}

.qrcode {
  width: 520rpx;
  height: 520rpx;
  box-shadow: 0rpx 1rpx 4.2rpx 2.8rpx rgba(10, 10, 10, 0.01);
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #cccc;
  margin-top: 95rpx;
}

.submit-btn {
  width: 595rpx;
  height: 88rpx;
  background-color: #5683ec;
  border-radius: 44rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-size: 30rpx;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24rpx;
  letter-spacing: 0rpx;
  color: #ffffff;
  margin-top: 60rpx;
}
</style>
